<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
		<meta name="viewport"	content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css?v=1">
		<link href="${pageContext.request.contextPath}/bettery/css/itao.css"	rel="stylesheet" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/dewei/js/jquery.js?v=1"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/jquery.validate.min.js"></script>
		<script type="text/javascript" src='${pageContext.request.contextPath}/dewei/js/jquery-ui-datepicker.min.js?v=1"'></script>
		<!-- 百度地图
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=790411bda172ff9496825d6ea740661d"></script>
		 -->
		<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/bettery_common.js?v=22"></script>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/dewei/css/calendar.css?v=1">
		<script type="text/javascript">
		
		$(function(){
		 getaddressByLatLngGaode();
			if(''!=$("#shangmenTime").html()){
				$("#hiddenTime").val($("#shangmenTime").html() + " " + $("#shangmenHour").val() + ":"+ $("#shangmenMuni").val());
			}
		    jQuery.validator.addMethod("timeCheck", 
		    	function(value, element) {
		    	    var r=false;
			    	var hiddenTime = $("#shangmenTime").html();
					if(''!=hiddenTime){
						var nowDate=$("#nowDate").val();
						if(nowDate>hiddenTime){
							r= false;
						}else{
							r=true;
							if(nowDate==hiddenTime){
								var nowHour=$("#nowHour").val();
								if(nowHour>($("#shangmenHour").val() + ":"+ $("#shangmenMuni").val())){
									r= false;
								}
							}
							}
					}
		    	return this.optional(element) || r;
		    	}, "预约时间非法");
		    	jQuery.validator.addMethod("mobilePhone", function(value, element) {var length = value.length;var tel = /^((1[3|4|5|8]{1}[0-9]{1})+\d{8})$/;return this.optional(element) || (length == 11 && tel.test(value));}, "格式错误 ");
			validator = $("#searchForm").validate({
			rules : {
				"model.kehuName" : {
					required : true
				},
				"model.lxTel" : {
					required : true,
					mobilePhone:true
				},
				"model.address":{
				    required : true	
				},
				"model.time":{
				    required : true	,
				    timeCheck:true
				}
			},
			messages : {
				"model.kehuName" : {
					required : "请填写您的姓名"
				},
				"model.lxTel" : {
					required : "请填写您的联系方式"
				},
				"model.address":{
				    required : "请填写您的地址"
				},
				"model.time":{
				    required : "必选",
				    timeCheck:"预约时间非法"
				}
			}
		});
					$('#calendar').datepicker({
						inline: true,
						firstDay: 1,
						minDate : 0,
						showOtherMonths: true,
						dateFormat:'yy-mm-dd',
						dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
						onSelect:function(date){
						    var nowDate=$("#nowDate").val();
						    if(nowDate){
						    	if(nowDate>date)
						    	{
						    		alert('该日期不可选');
						    		return;
						        }
						    }
						    $("#hiddenTime").val(date + " " + $("#shangmenHour").val() + ":"+ $("#shangmenMuni").val());
						    $('.date').html(date);
						    $('#calendar').hide();
						     validator.form();
						}
					});
		});
		function checkTime(){
			if(''!=$("#shangmenTime").html()){
				$("#hiddenTime").val($("#shangmenTime").html() + " " + $("#shangmenHour").val() + ":"+ $("#shangmenMuni").val());
				validator.form();
			}
		}		
		</script>
		<style type="text/css">
			.slide .inner-scroll{
				left: 0px;top: 0px;height: 100%;overflow-y:auto;
			}
			.bx-wrapper div.footer_bar{
				position: absolute;bottom: 0px;
			}
			select{
			border:none;background:none;
			}

		 
		</style>
	</head>
	<body onload="hideLoading()">
	<div id="calendar"	style="text-align: center; height: 0px; z-index: 999;; margin-top: 20px; display: none;position: absolute;left: 10px;top: 60px"	align="center"></div>
	    <form id='searchForm' action="toConfirm.do"  method="post">
	    <input type="hidden" id="nowDate" value="${nowDate}" /><input type="hidden" id="nowHour" value="${nowHour}" />
			<s:hidden  name='model.lat' id="hiddenLat"/><s:hidden name='model.lng' id="hiddenLng"/><s:hidden  name='model.blat' id="hiddenbLat"/><s:hidden name='model.blng' id="hiddenbLng"/>
			<s:hidden id="chexingId" name="model.chexingId"/>
			<s:hidden name="model.chexingName"   id="hiddenChexingName"/>
			<!-- 下订单人所在的省市县 -->
		    <s:hidden name='model.province' cssClass="hiddenProvince"  id="hiddenProvince"/>
		    <s:hidden name='model.city' cssClass="hiddenCity" id="hiddenCity"/>
		    <s:hidden name='model.town' cssClass="hiddenTown" id="hiddenTown"/>
		    <!-- 电池 -->
			<s:hidden name="model.dianchiId" id="dianchiId"/>
			<s:hidden name='model.price' id="ourPrice"/><s:hidden name='model.pinPai' id="pinPai"/>
			<s:hidden name='model.xingHao' id="xingHao"/><s:hidden name='model.imageUrl' id="imageUrl"/>
			
			<s:hidden name='model.zhongliang' id="bettery_zhongliang"/><s:hidden name='model.licheng' id="bettery_licheng"/>
		<s:hidden name='model.detailInfo' id="bettery_detailInfo"/><s:hidden name='model.marketPrice' id="bettery_marketPrice"/>
		
		<s:hidden name='model.serverPrice' id="bettery_serverPrice"/>
			<!-- 1:门店，2：上门 -->
			<input type="hidden" name='model.changeType' value="人工上门更换" id="hiddenChangeType"/>
			
			<!-- 门店地址 -->
			<s:hidden name='model.mendianAddr' id="hiddenmendianAddr"/>
			<s:hidden name='model.mendianId' id="hiddenMendianId"/>
			<!-- 门店联系电话 -->
			<s:hidden name='model.menDianTel' id="hiddenMenDianTel"/>
			<s:hidden name='model.mendianLxr' id="hiddenMendianLxr"/>
			<s:hidden name='model.mendianName' id="hiddenMendianName"/>

		 <input type="hidden" id="tsss">
		
		<div class="search_bar" align="center">
		<span class='new-btn left'   onclick="back();"><a >返回</a></span>
			
				请填写您的联系方式
			
		    <span class='new-btn right' onclick="submitdingdan();"  ><a >确定</a></span>
		</div>
		<div class='tips'>备注：人工上门更换每次加收${model.serverPrice}元服务费。</div>
		<div  class="col-lg-12 m-t">
			<div class='panel'>
			<div class='panel-body'>
			<div class='form-group'>
				<label class='form-caption'><font color="red">*</font>姓名</label>
				<input type="text" id="shangmenName" name="model.kehuName" value="${model.kehuName}" maxlength="30" class="form-control" placeholder="姓名"> 
				<label  class="error" for="shangmenName"></label>
			</div>
			<div class='form-group'>
				<label class='form-caption'><font color="red">*</font>手机号</label>
				<input type="text" id="shangmenTel" name="model.lxTel" value="${model.lxTel}" maxlength="11" class="form-control" placeholder="手机号"> 
				<label class="error" for="shangmenTel"></label>
			</div>
			<div class='form-group'>
				<label class='form-caption'><font color="red">*</font>预约上门地址</label>
				<div class="input-group">
				  <input type="text" id="shangmenAddress" name="model.address" value="${model.address}" maxlength="100" class="form-control address" placeholder="地址" >
				  <span class="input-group-addon" onclick="getaddressByLatLngGaode();"><img src='../dewei/img/loc.png' width='18px'> </span>
				</div>
				<label class="error" for="shangmenAddress"></label>
			</div>
			<div class='form-group'>
				<label class='form-caption'><font color="red">*</font>预约上门时间</label>
				<div >
					<span class='form-control date' style='display:inline-block;width:120px' name="shangmenTime" id="shangmenTime"  onclick="$('#calendar').show();">${nowDate}</span>
					<span class='form-control' style='display:inline-block;width:60px'>						
						<s:select name="shangmenHour"  onchange="checkTime();"    id="shangmenHour" list="#{'01':'01','02':'02','03':'03','04':'04','05':'05','06':'06','07':'07','08':'08','09':'09','10':'10','11':'11','12':'12','13':'13','14':'14','15':'15','16':'16','17':'17','18':'18','19':'19','20':'20','21':'21','22':'22','23':'23','00':'00'}" ></s:select>
						
					</span>
					<span class='form-control' style='display:inline-block;width:60px' >
						<s:select name="shangmenMuni" onchange="checkTime();"   id="shangmenMuni" list="#{'00':'00','15':'15','30':'30','45':'45'}"></s:select> 
					</span>
					</div>
					<input type="hidden"   name='model.time' value="${model.time}" id="hiddenTime"/>
				</div>
				<label id="hiddenTimeError" class="error" for="hiddenTime"></label>
			</div>
			</div>
		</div>
		 
		</form>
	</body>
</html>